<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main"/>
    <g:set var="entityName" value="${message(code: 'account.label', default: 'account')}"/>
    <title>不良资产地图</title>
    <style>
    %{--设置点击侧边栏如果大于当前屏幕高度则地图会变形--}%
    #wrapper{
        min-height: 0!important;
    }
    .nonPerformingAssetImg{
        position: absolute;
        z-index: 10;
        right: 20px;
        bottom: 155px;
    }
    .housingImg{
        position: absolute;
        z-index: 10;
        right: 20px;
        bottom: 155px;
        display: none;
    }
    .searchList label{
        line-height: 34px;
    }
    #searchCommunity a{
        color: #0A6CD1;
    }
    #searchCommunity h5{
        background-image:url(/assets/accountLogo/xiaoqu.png);
        height: 34px;
        width: 34px;
        line-height: 20px;
        color: #ffffff;
        font-size:12px;
    }
    .panel-tools a{
        /*margin-left: -24px!important;*/
    }
    #s2id_city>a{
        padding-left: 12px;
        box-shadow: none;
        border-radius: 0;
        border-color: #eaeaea;
    }
    .select2-container .select2-choice>.select2-chosen{
        /*padding-top: 6px;*/
    }
    #page .ui-pagination-container{
        width: 100%;
        /* padding: 35px 0 0 0;*/
    }
    #page{
        display: flex;
        justify-content: center;
    }
    #page .ui-pagination-container .ui-pagination-page-item{
        color: #6a6c6f;
        text-shadow:none;
    }
    #page .ui-pagination-container .ui-pagination-page-item.active{
        color: #fff;
    }
    #page .ui-pagination-container .ui-pagination-page-item:hover{
        color: #fff;
    }
    #searchCommunity{
        background: #fff;
        margin: 0;
        overflow-y: auto;
        max-height: 450px;
    }
    @media screen and (max-height: 800px) {
        #searchCommunity {
            max-height: 150px;
        }
    }
    .listStyle{
       border: none;
       font-size: 12px;
       height:37px;
    }
    .yellowStyle{
        border-bottom: 1px solid #CC9933!important;
    }
    .node1Class{
        width: 118px;
    }
    .node2Class{
        width: 97px;
    }
    .node3Class{
        width: 84px;
    }
    .node4Class{
        width: 50px;
    }
    .nodeOtherClass{
        width: 233px;
    }
    </style>
    <asset:stylesheet src="JQpage/jquery.pagination.css"/>
    <asset:javascript src="JQpage/jquery.pagination.min.js"/>
    <!-- map -->
    <asset:javascript src="newMap/libs/ol/ol.js" type="text/javascript" />
    <g:link href="../../assets/javascripts/newMap/libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <asset:javascript src="newMap/libs/ol/xdmap.js" type="text/javascript" />
    <g:link href="../../assets/javascripts/newMap/libs/ol/map.css" rel="stylesheet" type="text/css" />
    <!--libs-->
    <asset:javascript src="newMap/nonPerformingAsset/nonPerformingAsset.js"/>
    <asset:stylesheet src="newMap/cluster/cluster.css"/>
</head>
<body class="fixed-navbar fixed-sidebar">
%{--<g:include view="map/Mapscript.gsp"/>--}%
<div class="small-header">
    <div class="hpanel">
        <div class="panel-body">
            <div id="hbreadcrumb" class="pull-right">
                <ol class="hbreadcrumb breadcrumb">
                    <li>CINDATA PLS</li>
                    <li class="active">
                        <span>地图</span>
                    </li>
                </ol>
            </div>
            <h2 class="font-light m-b-xs">
                不良资产地图
            </h2>
        </div>
    </div>
</div>
<div class="input-group" style="width:100px;position: absolute;z-index: 10;left: 20px;top:70px">
    <div class='input-group-btn' >
        <g:select class="form-control" name="city" id="city"
                  from="${com.cindata.City.findAllByNameInList(new com.cindata.ComponentService().evaluate(com.cindata.Component.findByCode('showCity')), [sort: 'name', order: 'asc'])}"
                  valueMessagePrefix="status" optionKey="zoneNumber" optionValue="name"
                  value="${params?.city}"
                  onchange="search()"/>
    </div>
    <input type="text" class="form-control" style="width:352px" id="search" placeholder=""/>
    <span class="fa fa-search" id='searchData' style="position: absolute;z-index: 20;right: 13px;top: 9px;cursor: pointer;font-size: 16px;color: #9d9fa2;"
          onclick="searchData(window.map)"></span>
    <div id="word2" style="z-index: 10; position: absolute;width:352px;top: 34px;"></div>
</div>
<div style="width:450px;position: absolute;z-index: 9;left: 20px;top:110px">
    <div class="">
        <div class="hpanel">
            <div class="panel-heading hbuilt" style="padding-left: 20px;">
                <div class="panel-tools">
                    <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                </div>
                筛选条件
            </div>
            <div class="panel-body" style="padding-bottom: 8px; display: none">
                <div class="row searchList" style="margin-bottom: 4px;">
                    <div class="form-group col-sm-6 m-n">
                        <label for="district" class="col-sm-5 p-n">行政区</label>
                        <div class="col-sm-7 district p-n " >
                            <g:select class="form-control" name="district" id="district"
                                      from=""
                                      valueMessagePrefix="status" optionKey="zoneNumber" optionValue="name"
                                      value="${params?.district}"
                                      noSelection="${["-1": '请选择行政区']}"
                                      onchange="searchData(window.map)"/>
                        </div>
                    </div>
                    <div class="form-group col-sm-6 m-n">
                        <label class="col-sm-5 p-n" >资产类型</label>
                        <div class="col-sm-7 p-n">
                            <g:select class="form-control" name="buildingType" id="buildingType"
                                      from="${com.cindata.dictionary.BuildingTypeDict.list()}"
                                      valueMessagePrefix="status" optionKey="id" optionValue="name"
                                      value="${params?.buildingType}"
                                      noSelection="${["": '资产类型']}"
                                      onchange="searchData(window.map)"/>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12" style="margin-bottom: 8px; padding-right: 13px;">
                        <label for="city" class="col-sm-2 control-label p-n p-t-xs p-b-xs">放款日期</label>
                        <div class="col-sm-10 input-daterange input-group p-r-n p-l-md"  id="datepicker" style="width: 83%;">
                            <input type="text" class=" form-control " placeholder="开始时间"  style="height:28px;text-align: left;"
                                   value="${params?.startDate}" name="startDateStart" id="startDateStart"
                                   onchange="searchData(window.map)"/>
                            <span class="input-group-addon" style="padding-bottom: 2px">至</span>
                            <input type="text" class=" form-control " placeholder="结束时间" style="height:28px;text-align: left;"
                                   value="${params?.endDate}" name="startDateEnd" id="startDateEnd"
                                   onchange="searchData(window.map)"/>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12" style="margin-bottom: 8px; padding-right: 13px;">
                        <label for="city" class="col-sm-2 control-label p-n p-t-xs p-b-xs">贷款余额</label>
                        <div class="col-sm-10 input-group p-r-n p-l-md"  style="width: 83%;">
                            <input type="text" class=" form-control " placeholder="余额上限"  style="height:28px"
                                   value="${params?.loansBalanceStart}" name="loansBalanceStart" id="loansBalanceStart"
                                   onchange="searchData(window.map)"/>
                            <span class="input-group-addon" style="padding-bottom: 2px">至</span>
                            <input type="text" class=" form-control " placeholder="余额下限" style="height:28px"
                                   value="${params?.loansBalanceEnd}" name="loansBalanceEnd" id="loansBalanceEnd"
                                   onchange="searchData(window.map)"/>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <ul class="list-group" id="searchCommunity">

                </ul>
                <div class="pagination" id="page"></div>
            </div>
        </div>
    </div>
</div>
<asset:javascript src="newMap/nonPerformingAsset/doNonPerformingAsset.js"/>
<div  id="allmap" style="position: absolute;">
    <div class="heatmap">
        <div id="popup" class="ol-popup">
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup-title" class="popup-title"></div>
            <div id="popup-content" class="popup-content"></div>
        </div>
    </div>
    %{--<asset:image src="clusterImg.png" class="clusterImg"/>--}%
    %{--<asset:image src="housingImg.png" class="housingImg"/>--}%
</div>
<g:javascript>
    $(function () {
        $('#datepicker').datepicker({
            language: 'zh-CN'
        });
        $('#datepicker2').datepicker({
            language: 'zh-CN'
        });
        $("#datepicker").on("changeDate", function(event) {
            $("#my_hidden_input").val(
                    $("#datepicker").datepicker('getFormattedDate')
            )
        });

        // $('#esateTable').footable();

        $('.input-group.date').datepicker({ });
        $('.input-daterange').datepicker({ });
    });
    var params = xdmap.getUrlParams(document.URL);
    var zoneNumber = $("#city").val();
    var center = null;
    if (zoneNumber == '330100') {
        center = ol.proj.transform([120.1551500000, 30.2741500000], 'EPSG:4326', 'EPSG:3857');

    } else {
        center = nonPerformingAsset.getCenter(zoneNumber);
    }
    var map = xdmap.mapInit('allmap',11,center);
    if(params == null){
        setTimeout(function(){nonPerformingAsset.init()  },1000);
    }else{
        setTimeout(function(){nonPerformingAsset.referrerInit(params)},1000);
    }
</g:javascript>
</body>
</html>
